<#include "./template.ftl">

<#macro head>
<title>产品详情-Morketing</title>
<link rel="stylesheet" href="${base}/client/css/productList.css">
</#macro>
<#macro content>
    <div id="contents">
        <#if product??>
         <div class="productList-main clearfix wrap">
            <div class="pl-left f-l">
                 <div class="pl-detail-infos">
                     <div class="pic f-l">
                         <img width="100%" src="${base}/system/getImg?imgId=${product.iconUrl}&w=164&h=164" alt="">
                     </div>
                     <div class="cell f-l">
                         <h2>${product.name}</h2>
                         <p>阶段:<span>${product.process}</span></p>
                         <p>产品类型:<span>${product.typeStr}</span></p>
                         <p>登陆平台:<span>${product.platformStr}</span></p>
                         <p>合作: <span>${product.cooperationWays}</span></p>
                     </div>
                 </div>

                 <div class="pl-detail-intro">
                     <h2 class="common-h2">产品展示</h2>
                     <div class="detail-p" id="show-detail-pic">
                        <div class="inner">
                         ${product.display}
                         </div>
                     </div>

                     <h2 class="common-h2">产品介绍</h2>
                     <div class="detail-p">
                            ${product.discription}
                     </div>

                     <h2 class="common-h2">所属公司</h2>
                     <div class="detail-p">${product.company}</div>

                     <h2 class="common-h2">推广区域</h2>
                     <div class="detail-p">${product.area}</div>

                     <h2 class="common-h2">合作方式</h2>
                     <div class="detail-p">${product.cooperationWays}</div>

                     <h2 class="common-h2">联系方式</h2>
                     <div class="detail-p"><#if no_login??><input type="button" value="获取联系方式" onclick="getContact()"/> <#else> ${product.contact!''}<br/>${product.phone!''} </#if></div>
                 </div>
            </div>

            <div class="pl-right f-r">
                <#if products??>
                 <div class="pl-slide-intro">
                    <h2 class="slide-h2">推荐产品</h2>
                    <ul>
                        <#list products as p>
                         <li>
                             <div class="pic f-l">
                                 <img width="100%" src="${base}/system/getImg?imgId=${p.iconUrl}&w=450" alt="">
                             </div>
                             <div class="cell f-l">
                                 <a href="${base}/product/id/${p.id}"><h2>${p.name}</h2></a>
                                 <p>阶段:<span>${p.process}</span></p>
                                 <p>平台:<span>${p.platformStr}</span></p>
                                 <p>产品类型:<span>${p.typeStr}</span></p>
                             </div>
                         </li>
                        </#list>
                    </ul>
                 </div>
                </#if>
            </div>
         </div>
        </#if>
    </div>
</#macro>
<#macro js>
<script type="text/javascript">
    function getContact(){
        alert("您还没有登录，请登录！");
        location.replace("${base}/login?redirect_url=" + window.location.href);
    }




window.onload = function() { 
        var obj = $(".pl-right");
                            var offsetT = obj.offset().top;
                            var offsetL= obj.offset().left;
                            var objH=obj.height();

                            var leftH=$('.pl-left').height();
                            var leftT=$('.pl-left').offset().top;

                            var mixT=leftH-objH+leftT-88;

                                $(document).on('scroll',function(){
                                    var scrollT=$(document).scrollTop();
                                    if(scrollT > offsetT-64 && scrollT < mixT ){
                                        obj.css({
                                            position:'fixed',
                                            top:'64px',
                                            left:offsetL,
                                            right:'auto',
                                            bottom:'auto'
                                        })
                                    }else if(scrollT > mixT){
                                        obj.css({
                                            position:'absolute',
                                            right:0,
                                            bottom:0,
                                            left:'auto',
                                            top:'auto'
                                        })

                                    }else{
                                        obj.css({
                                            position:'static'
                                        })
                                    }

                                })


}

</script>
</#macro>

